<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="myDiv">

            <!--
            v-model.lazy用法一般在用户名输入完毕后，要用ajax请求访问服务端，再获得结果时.
            -->
            <label>用户名:</label> <input type="text"  v-model.lazy.trim="formData.userName" placeholder="请输入用户名" name="userName"  /><br/>
        <label>年龄:</label> <input type="text"  v-model.number="formData.age" placeholder="年龄"  /><br/>

        <label>密码:</label>   <input type="password"   v-model="formData.pwd"  name="pwd" /><br/>

            <label>确认密码:</label>  <input type="password"   v-model="formData.confirmPwd" name="confirmPwd" /><br/>


            <!--
                在formData中定义的gender的默认为值1或2，vue会根据gender:"1|2" 与表单type=radio进行数据绑定
                    当gender:"1"时，根据表单元素的value属性进行绑定，当与value属性值相同时，就会让该元素默认选中

            -->
            <label>性别:</label>  <label><input type="radio" checked="checked"  v-model="formData.gender" name="gender" value="1" />  男 </label>

            <label><input type="radio" name="gender"  v-model="formData.gender"  value="2"  />女 </label>
            <br/>

            <label>婚否:</label>     <label><input type="radio" name="married"  v-model="formData.married"  value="已婚" />已婚 </label>
            <label><input type="radio" checked  name="married"   v-model="formData.married"    value="未婚" />未婚 </label>
            <br/>


            <label>爱好:</label>   <label><input type="checkbox" name="ah"  v-model="formData.ah" value="编程" />编程 </label>
            <label><input type="checkbox" name="ah"  value="看电影"   v-model="formData.ah"  />看电影 </label>
            <label><input type="checkbox" name="ah"  value="摸鱼"   v-model="formData.ah" />摸鱼 </label>
            <label><input type="checkbox" name="ah"  value="钓鱼"  v-model="formData.ah" />钓鱼 </label>



            <br/>
            选中时指定值为已选中，未选时则指定值为未选中:
            <input type="checkbox" v-model="formData.selectedValue"  true-value="已选中" false-value="未选中">

            <br/>

            <label>省份:</label>
            <!--select元素也必需添加name属性
               每一对option代表一个下拉列表项
               option有value属性，在提交表单 ，选中中的option如果添加了value属性则将value属性的值提交给后端
               否则提交option开始和结束标记段的文本内容
            -->
            <select name="province" v-model="formData.province">
                <option value="">--请选择--</option>
                <option value="hn">湖南</option>
                <option value="hb">湖北</option>
                <option value="jx">江西</option>
                <option value="yn">云南</option>
            </select>


            <label>省份:</label>

            <select name="province2" v-model="formData.selectedProince">
                <option value="">--请选择--</option>
                <option v-for="p in formData.province2" v-bind:value="p.id">

                    {{p.name}}
                </option>
            </select>


            <br/>

            <label>个人简介(多行文本框):</label>
            <br/>
            <textarea v-model="formData.discription" name="discription" rows="10" cols="100">在开始和结束标记内容输写文件内容</textarea>




            <br/>
            <!--type=submit表示提交按钮，必需放到form标记内容，点击后才会将表单元素组织生成查询字符串提交给目标地址-->





            <button type="button">普通的按钮</button><br/>



    </div>

</body>
</html>

<script src="/js/vue.js"></script>



<script>
    let vue = new Vue({
        el:"#myDiv",
        data:{
            formData:{
                userName:"admin",
                pwd:"123",
                age:0,
                selectedValue:"",
                confirmPwd:"123",
                gender:"1",
                married:"已婚",
                ah:["编程"],
                province:"hn",
                discription:"编程高手",
                selectedProince:"",//获得选中的省份.
                province2:[{name:"湖南",id:1},{name:"湖北",id:2},{name:"江西",id:3}]

            },
            formData2:{
                userName:"",
                pwd:"",
                confirmPwd:"",
                gender:"",
                married:"",
                ah:[],
                province:"",
                discription:""

            }

        }


    })

</script>